<template>
  <div class="glass footer">
    <div class="bar">
      <div class="year d-flex ai-center">
        <img class="icon" :src="play" alt="" />
        <p class="font-numer">{{data.year}}</p>
        
      </div>
      <div class="slide d-flex">
        <!-- <img class="slideImg pointer" :src="arrowL" alt=""> -->
        <el-scrollbar
          ref="scrollContainer"
          @wheel.prevent="handleScroll"
        >
          <div class="dates d-flex">
            <div
              v-for="(item, index) in dateList"
              :key="index"
              class="pointer"
              @click="datesActived(index)"
            >
              <div :class="['font-numer', item.actived ? 'actived' : '']">
                {{ item.date }}
              </div>
              <div class="trackBar d-flex">
                <div class="track"></div>
                <div :class="['btn', item.actived ? 'actived' : '']"></div>
                <div class="track"></div>
              </div>
            </div>
          </div>
        </el-scrollbar>
        <!-- <img class="slideImg pointer" :src="arrowR" alt=""> -->
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  ref,
  reactive,
  onMounted,
  onUnmounted,
  computed,
  watch
} from "vue";
import moment from "moment";

const PropsType = {
  data: {
    type: Array,
    default: [],
    require: true,
  },
} as const;
export default defineComponent({
  props:PropsType,
  components: {},
  setup(props,context) {
    //变量
    const play = require("@/assets/img/play.png");
    const arrowL = require("@/assets/img/arrow_left.png");
    const arrowR = require("@/assets/img/arrow_right.png");
    const dateList = ref([]);
    const data = reactive({
      year:moment().format('YYYY'),
      actived:null
    });
    const scrollContainer = ref();
    const scrollWrapper = computed(() => {
      return scrollContainer.value.wrapRef;
    });
    // 生命周期
    onMounted(() => {
      //
      dateList.value = props.data
      data.actived = dateList.value.length - 1
      data.year = dateList.value[data.actived].date
      if(scrollWrapper.value){
        setTimeout(() => {
          const $scrollWrapper = scrollWrapper.value;
          $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth;
        }, 100);
      }
      
    });

    onUnmounted(() => {
      //
    });

    watch(
      () => props.data,
      (val: any) => {
        dateList.value = val
        data.actived = dateList.value.length - 1
        data.year = dateList.value[data.actived].date
        setTimeout(() => {
          const $scrollWrapper = scrollWrapper.value;
          $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth;
        }, 100);
      }
    );

    //methods
    
    //
    const datesActived = (val) => {
      dateList.value.forEach((item, index) => {
        item.actived = index == val ? true : false;
      });
      data.actived =val
      data.year = dateList.value[data.actived].date
      timeChange()
    };

    const handleScroll = (e: any) => {
      const eventDelta = e.wheelDelta || -e.deltaY * 20;
      const $scrollWrapper = scrollWrapper.value;
      $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft - eventDelta / 2;
    };

    const timeChange = () =>{
      context.emit('timeChange',data.year)
    }

    // return
    return {
      data,
      play,
      arrowL,
      arrowR,
      dateList,
      datesActived,
      handleScroll,
      scrollContainer,
    };
  },
});
</script>

<style lang="scss" scoped>
@import "@/assets/scss/index.scss";
</style>
